<template>
	<view>
		<view class="headTips">
			<text class="tipsFont">置顶后任务位置会提升到任务区顶部，可获取超高流量曝光！</text>
		</view>
		<view class="tipsBox">
			<text class="frame"></text>
			<text class="tipstop">置顶功能购买</text>
		</view>
		<view  v-for="(item,index) in vipMoneydata" :key="index" :class="{memberStyle:index==num}" @click="qiedhuan(index,item)">
			<view class="member">
			<text class="month">{{item.month}}次</text>
			<text class="presentPrice"><text class="originalPrice">{{item.originalPrice}}元/次</text>￥{{item.presentPrice}}元</text>
		    </view>
		</view>
		<view class="tipsBox">
			<text class="frame"></text>
			<text class="tipstop">选择支付方式</text>
		</view>
		<view class="payBox">
			<text class="payFont">支付方式</text>
			<text class="amountPayable">应付金额: <text class="money">￥{{money}}</text> </text>
		</view>
		<view @click="payButon(index)" class="payImgbox" v-for="(item,index) in payData" :key="index+'1'">
			<image class="payimg" :src="item.payImg"></image>
			<text class="payfonta">{{item.payFont}}</text>
			<image class="dui" v-show="index==ishow" :src="item.paychoose"></image>
		</view>
		<view class="confirmPayment">
			确认付款
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1,
				money:'',
				ishow:0,
				vipMoneydata:[{
					month:'5',
					originalPrice:'98.0',
					presentPrice:'88.0',
					id:'1'
				},
				{
					month:'10',
					originalPrice:'294.0',
					presentPrice:'248.0',
					id:'2'
				},
				{
					month:'20',
					originalPrice:'1176.0',
					presentPrice:'888.0',
					id:'3'
				},
				{
					month:'50',
					originalPrice:'294.0',
					presentPrice:'248.0',
					id:'2'
				},
				{
					month:'100',
					originalPrice:'1176.0',
					presentPrice:'888.0',
					id:'3'
				},
				{
					month:'300',
					originalPrice:'294.0',
					presentPrice:'248.0',
					id:'2'
				},
				{
					month:'500',
					originalPrice:'1176.0',
					presentPrice:'888.0',
					id:'3'
				}],
				payData:[{
					payImg:'../../../static/user2/zfb.png',
					payFont:'支付宝付款',
					paychoose:'../../../static/user2/dui.png'
				},
				{
					payImg:'../../../static/user2/wx.png',
					payFont:'微信支付',
					paychoose:'../../../static/user2/dui.png'
				}]
			};
		},
		created() {
			this.money=this.vipMoneydata[this.num].presentPrice;
		},
		methods:{
			qiedhuan(index, item) {
				var self = this
				this.num = index; //this指向app
				this.money=this.vipMoneydata[this.num].presentPrice;
			},
			payButon(e){
				this.ishow=e;
			},
			}
	}
</script>

<style lang="scss">
	page{
		background: #F1F1F1;
	}
   .headTips{
	   width:750rpx;
	   height:120rpx;
	   background:rgba(115,34,216,0.1);
	   display: flex;
	   align-items: center;
	   justify-content: center;
   }
   .tipsFont{
	   display: block;
	   width:650rpx;
	   height:63rpx;
	   font-size:26rpx;
	   font-family:PingFang SC;
	   font-weight:bold;
	   color:#F9585A;
	   }
	   .tipsBox{
		   width: 720rpx;
		   height: 90rpx;
		   margin-left: 15rpx;
		   display: flex;
		   align-items: center;
		   }
		   .frame{
			   display: block;
			   width:10rpx;
			   height:30rpx;
			   background:rgba(115,34,216,1);
			   border-radius:5rpx;
		   }
		   .tipstop{
			   font-size:28rpx;
			   font-family:PingFang SC;
			   font-weight:400;
			   color:rgba(51,51,51,1);
			   margin-left: 12rpx;
			   margin-top: -4rpx;
		   }
		   .member{
		   		   width: 710rpx;
		   		   height: 100rpx;
		   		   background:rgba(255,255,255,1);
		   		   border-radius:10rpx;
		   		   margin-left: 20rpx;
		   		   display: flex;
		   		   align-items: center;
		   		   position: relative;
		   }
		   .memberStyle{
		   		   width: 710rpx;
		   		   height: 100rpx;
		   		   background:rgba(255,255,255,1);	
		   		   box-shadow:0rpx 0rpx 14rpx 2rpx rgba(115,34,216,0.15);
		   		   border-radius:10rpx;
		   		   margin-left: 20rpx;
		   		   display: flex;
		   		   align-items: center;
		   		   position: relative;
		   }
		   .month{
		   		   font-size:28rpx;
		   		   font-family:PingFang SC;
		   		   font-weight:bold;
		   		   color:#333333;
		   		   position: absolute;
		   		   left: 21rpx;
		   }
		   .presentPrice{
		   		   font-size:28rpx;
		   		   font-family:PingFang SC;
		   		   font-weight:400;
		   		   color:rgba(51,51,51,1);
		   		   position: absolute;
		   		   right: 20rpx;
		   }
		   .originalPrice{
		   		   font-size:24rpx;
		   		   font-family:PingFang SC;
		   		   font-weight:400;
		   		   color:rgba(142,142,142,1);
		   		   margin-right: 15rpx;
		   }
		   .payBox{
		   			   width:710rpx;
		   			   height:120rpx;
		   			   background:rgba(255,255,255,1);
		   			   border-radius:10rpx;
		   			   margin-left: 20rpx;
		   			   display: flex;
		   			   align-items: center;
		   			   position: relative;
		   }
		   .payFont{
		   			   font-size:32rpx;
		   			   font-family:PingFang SC;
		   			   font-weight:bold;
		   			   color:rgba(51,51,51,1);
		   			   position: absolute;
		   			   left: 19rpx;
		   }
		   .amountPayable{
		   			   font-size:32rpx;
		   			   color: #333333;
		   			   position: absolute;
		   			   right: 24rpx;
		   }
		   .money{
		   			   font-size:32rpx;
		   			   color: #FF3B30;
		   }
		   .payImgbox{
		   			   width:710rpx;
		   			   height:120rpx;
		   			   background:rgba(255,255,255,1);
		   			   border-radius:10rpx;
		   			   display: flex;
		   			   align-items: center;
		   			   margin-left:20rpx;
		   			   position: relative;
		   }
		   .payimg{
		   			   width:70rpx;
		   			   height:70rpx;
		   			   position: absolute;
		   			   left: 20rpx;
		   }
		   .payfonta{
		   			   font-size:28rpx;
		   			   font-family:PingFang SC;
		   			   font-weight:400;
		   			   color:rgba(51,51,51,1);
		   			   position: absolute;
		   			   left: 105rpx;
		   }
		   .dui{
		   			   width: 40rpx;
		   			   height: 40rpx;
		   			   position: absolute;
		   			   right: 25rpx;
		   }
		   .confirmPayment{
		   			   width:710rpx;
		   			   height:90rpx;
		   			   background:rgba(115,34,216,1);
		   			   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		   			   border-radius:20rpx;
		   			   display: flex;
		   			   align-items: center;
		   			   justify-content: center;
		   			   font-size:38rpx;
		   			   font-family:PingFang SC;
		   			   font-weight:bold;
		   			   color:rgba(255,255,255,1);
		   			   margin-left: 20rpx;
		   			   margin-top: 30rpx;
					   margin-bottom: 30rpx;
		   			   }
</style>
